<template>
  <el-container>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="160px" label-position="left" class="demo-ruleForm" size="small">
      <el-form-item label="跑腿单佣金计算方式" prop="name">
        <el-radio v-model="ruleForm.accountForm" label="1" border>订单配送费百分比抽成</el-radio>
        <el-radio v-model="ruleForm.accountForm" label="2" border>固定抽成</el-radio>
      </el-form-item>

      <div v-if="ruleForm.accountForm == 1">
        <el-form-item label="抽成项目" prop="name">
          <el-radio v-model="ruleForm.accountForm" label="1" border>配送费</el-radio>
          <el-radio v-model="ruleForm.accountForm" label="2" border>小费</el-radio>
        </el-form-item>

        <el-form-item label="抽成比例" prop="name">
          <el-col span="8">
            <el-input placeholder="请输入内容">
              <template slot="append">% , 最低抽成金额</template>
            </el-input>
          </el-col>
          <el-col span="6">
            <el-input placeholder="请输入内容">
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-form-item>
      </div>

      <div v-if="ruleForm.accountForm == 2">
        <el-form-item label="抽成金额" prop="name">
          <el-input placeholder="请输入内容">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </div>

      <!--<el-form-item label="提现周期" prop="name">-->
        <!--<el-col span="24">-->
          <!--<el-input placeholder="请输入内容" v-model="input4">-->
            <!--<template slot="append">天</template>-->
          <!--</el-input>-->
        <!--</el-col>-->
        <!--<el-col span="24">-->
          <!--<p class="tip-text tip-color">提现周期设置为0，标识不限制提现周期。</p>-->
          <!--<p class="tip-text">例如: 提现周期设置为7天，即至少在上次提现7天后，才可以进行下次提现。</p>-->
        <!--</el-col>-->
      <!--</el-form-item>-->

      <el-form-item label="将服务费率设置同步到所以代理" prop="name">
        <el-col span="24">
          <el-switch
            v-model="ruleForm.accountForm">
          </el-switch>
        </el-col>
        <el-col span="24">
          <p class="tip-text">同步后，所有代理的服务费率规则都会被设置为这个规则</p>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    data() {
      return {
        ruleForm: {
          accountForm:1,
          name: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      var attrs = this.$attrs
      console.log(attrs)
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  .tip-text{
    font-size: 12px;
    margin: 5px 0;
    padding: 0;
    height: 20px;
    line-height: 20px;
    color: #666666;
  }
  .tip-color{
    color: #e55a5a;
    font-weight: bold;
  }
</style>
